<template>
  <view class="normal-login-container" :style="{'--primary-color': primaryColor}">
    <!-- 页面加载状态 -->
    <PageLoading :show="pageLoading" :primary-color="primaryColor" loading-text="加载中..." />
    
    <!-- 页面主要内容 -->
    <view class="page-content" v-show="shouldShowContent">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="processImageUrl(programConfig.aboutLogo) || globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">{{ programConfig.aboutShopName || '迭代猫在线商城' }}登录</text>
    </view>
    <view class="login-form-content">
      <!-- 隐藏账号密码输入框和普通登录按钮 -->
      <!-- <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block lg round">登录</button>
      </view>
      <view class="reg text-center" v-if="register">
        <text class="text-grey1">没有账号？</text>
        <text @click="handleUserRegister" class="text-primary">立即注册</text>
      </view> -->
      
      <!-- <view class="xieyi text-center">
        <text class="text-grey1">登录即代表同意</text>
        <text @click="handleUserAgrement" class="text-primary">《用户协议》</text>
        <text @click="handlePrivacy" class="text-primary">《隐私协议》</text>
      </view> -->
      
      <!-- 微信登录按钮 - 移除图标 -->
      <view class="wechat-login-section">
        <button @click="handleWechatLogin" class="wechat-login-btn" :disabled="wechatLoading">
          <text class="wechat-text">{{ wechatLoading ? '登录中...' : '微信一键登录' }}</text>
        </button>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
  import { getCodeImg, registerWechatUser, wechatAutoLogin, wechatLogin } from '@/api/login'
  import { getToken } from '@/utils/auth'
  import config from '@/api/config.js'
  import { API_CONFIG } from '@/api/config.js'
  import { getThemeColorFromGlobal, getThemePrimaryColor } from '@/utils/theme.js'
  import PageLoading from '@/components/PageLoading/index.vue'
  import pageLoadingMixin from '@/mixins/pageLoading.js'
  import { getSourcePage, clearSourcePage } from '@/utils/loginCheck.js'

  export default {
    components: {
      PageLoading
    },
    mixins: [pageLoadingMixin],
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        // 小程序配置数据
        programConfig: {
          aboutLogo: '',
          aboutShopName: ''
        },
        // 微信登录相关
        wechatLoading: false,
        themeColor: '1',
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ""
        }
      }
    },
    computed: {
      primaryColor() {
        return getThemePrimaryColor(this.themeColor)
      }
    },
    created() {
      this.getCode()
      this.initThemeColor()
      this.loadProgramConfig()
    },
    async onLoad() {
      // 开始页面加载
      this.startPageLoading()
      
      try {
        //#ifdef H5
        if (getToken()) {
          this.$tab.reLaunch('/pages/index')
          return
        }
        //#endif
        
        // 初始化主题色
        await this.initThemeColor()
        this.markThemeLoaded()
        
        // 加载配置数据
        await this.loadProgramConfig()
        this.markDataLoaded()
        
        // 页面加载完成后自动执行微信登录
        this.handleWechatLogin()
      } catch (error) {
        console.error('登录页面加载失败:', error)
        this.forceCompletePageLoading()
      }
    },
    methods: {
      async initThemeColor() {
        try {
          // 获取主题色配置
          const themeColor = await getThemeColorFromGlobal()
          
          // 判断是否为异步主题色（数字字符串表示需要从服务器获取）
          if (/^\d+$/.test(themeColor)) {
            // 异步获取主题色
            this.themeColor = themeColor
            console.log('异步获取主题色 - 登录页面:', themeColor)
          } else {
            // 同步获取主题色（直接使用颜色值）
            this.themeColor = themeColor
            console.log('同步获取主题色 - 登录页面:', themeColor)
          }
        } catch (error) {
          console.error('登录页面主题色初始化失败:', error)
          // 使用默认主题色
          this.themeColor = '1'
        }
      },
      // 处理图片URL
       processImageUrl(imagePath) {
         if (!imagePath) return ''
         
         // 如果已经是完整的URL，直接返回
         if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
           return imagePath
         }
         
         // 处理服务器路径
         let serverUrl = API_CONFIG.SERVER_IP
         
         // 如果包含/dev-api，替换成/
         if (imagePath.includes('/dev-api')) {
           imagePath = imagePath.replace('/dev-api', '')
         }
         
         // 确保路径以/开头
         if (!imagePath.startsWith('/')) {
           imagePath = '/' + imagePath
         }
         
         return serverUrl + imagePath
       },
       // 加载小程序配置
       async loadProgramConfig() {
         try {
           console.log('开始获取小程序配置')
           // 使用 App.vue 中的实时获取配置方法
           const app = getApp()
           const config = await app.getProgramConfig()
           
           if (config) {
             this.programConfig = {
               aboutLogo: config.aboutLogo || '',
               aboutShopName: config.aboutShopName || '迭代猫在线商城'
             }
             console.log('小程序配置加载成功:', this.programConfig)
           } else {
             console.error('获取小程序配置失败')
             // 使用默认配置
             this.programConfig = {
               aboutLogo: '',
               aboutShopName: '迭代猫在线商城'
             }
           }
         } catch (error) {
           console.error('获取小程序配置异常:', error)
           // 使用默认配置
           this.programConfig = {
             aboutLogo: '',
             aboutShopName: '迭代猫在线商城'
           }
         }
       },
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置登录时间标志，避免登录后立即弹出登录提示
        uni.setStorageSync('lastLoginTime', Date.now())
        
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          // 获取来源页面
          const sourcePage = getSourcePage()
          // 登录成功，准备跳转到来源页面
          
          // 清除保存的来源页面
          clearSourcePage()
          
          // 判断是否为tab页面
          const tabPages = ['/pages/index', '/pages/shop/index', '/pages/cart/index', '/pages/mine/index']
          const isTabPage = tabPages.includes(sourcePage)
          
          if (isTabPage) {
            // tab页面使用switchTab跳转
            // 跳转到tab页面
            this.$tab.switchTab(sourcePage)
          } else if (sourcePage === '/pages/index') {
            // 首页使用reLaunch
            // 跳转到首页
            this.$tab.reLaunch('/pages/index')
          } else {
            // 非tab页面使用reLaunch跳转，清空页面栈避免返回到登录页面
            // 跳转到非tab页面
            
            // 检查URL长度，uni.reLaunch有长度限制
            if (sourcePage.length > 1000) {
              // 页面URL过长，回退到首页
              this.$tab.reLaunch('/pages/index')
              return
            }
            
            uni.reLaunch({
              url: sourcePage,
              fail: (err) => {
                // 跳转失败，回退到首页
                this.$tab.reLaunch('/pages/index')
              }
            })
          }
        })
      },
      
      // 微信登录方法
      async handleWechatLogin() {
        this.wechatLoading = true
        
        // 开始微信登录流程
        
        try {
          // 步骤1: 使用uni.login获取微信登录凭证
          // 步骤1: 获取微信登录凭证
          const loginRes = await new Promise((resolve, reject) => {
            uni.login({
              provider: 'weixin',
              success: (res) => {
                // uni.login success
                resolve(res)
              },
              fail: (err) => {
                // uni.login fail
                reject(new Error('微信登录授权失败: ' + (err.errMsg || JSON.stringify(err))))
              }
            })
          })
          
          // 微信登录凭证
          const code = loginRes.code
          
          if (!code) {
            console.error('loginRes中没有code字段，完整响应:', loginRes)
            throw new Error('登录凭证code不能为空')
          }
          
          // 步骤2: 通过后端统一接口获取openId（后端按 orgId + appId 动态读取 AppSecret）
          const openIdResponse = await wechatLogin(code)
          if (openIdResponse.code !== 200) {
            throw new Error(openIdResponse.msg || '获取OpenID失败')
          }
          const openId = openIdResponse.data.openid
          if (!openId) {
            throw new Error('未获取到有效的OpenID')
          }
          
          // 步骤3: 根据OpenID查询用户是否存在
          const queryUrl = `${API_CONFIG.BASE_URL}${API_CONFIG.WECHAT_LOGIN.CHECK_USER}`
          const queryParams = { openId: openId }
          
          const [queryErr, queryRes] = await uni.request({
            url: queryUrl,
            method: 'POST',
            header: {
              'Content-Type': 'application/json'
            },
            data: queryParams
          })
          if (queryErr) {
            throw new Error('查询用户失败: ' + JSON.stringify(queryErr))
          }
          
          // 步骤4: 根据查询结果决定登录或注册
          if (queryRes.data.code === 200 && queryRes.data.data) {
            // 用户存在，执行登录流程
            await this.performWechatLogin(openId)
          } else {
            // 用户不存在，执行注册流程
            await this.performWechatRegister(openId)
          }
          
        } catch (error) {
          // 微信登录失败
          uni.showToast({
            title: '微信登录失败: ' + error.message,
            icon: 'none',
            duration: 3000
          })
        } finally {
          this.wechatLoading = false
          // 微信登录流程结束
        }
      },
      
      // 执行微信登录
      async performWechatLogin(openId) {
        // 执行微信自动登录
        
        try {
          // 使用封装的API函数，会自动传递组织ID参数
          const loginResponse = await wechatAutoLogin(openId)
          
          // 登录响应
          
          if (loginResponse.code !== 200) {
            throw new Error(loginResponse.msg || '登录失败')
          }
          
          const loginResult = loginResponse.data
          const token = loginResult.token
        
        if (!token) {
          throw new Error('登录成功但未获取到token')
        }
        
        // 登录成功，获取到token
        
        // 保存token和openId到本地存储
        
        this.$store.commit('SET_TOKEN', token)
        uni.setStorageSync('openId', openId)
        
        // 设置登录时间标志，避免登录后立即弹出登录提示
        uni.setStorageSync('lastLoginTime', Date.now())
        
        // 验证保存结果
        // 验证保存结果（不输出敏感信息）
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 跳转到首页
        setTimeout(() => {
          this.loginSuccess()
        }, 1500)
        
        } catch (error) {
          console.error('微信自动登录失败:', error)
          throw error
        }
      },
      
      // 执行微信注册
      async performWechatRegister(openId) {
        // 执行微信注册流程
        
        const nickName = `微信用户_${openId.slice(-6)}`
        const avatar = 'https://example.com/default-avatar.png'
        
        // 使用封装的API函数
        const { registerWechatUser } = require('@/api/login')
        const registerResponse = await registerWechatUser(openId, nickName, avatar)
        
        if (registerResponse.code !== 200) {
          if (registerResponse.msg && registerResponse.msg.includes('用户已存在')) {
            // 用户已存在，直接执行登录
            await this.performWechatLogin(openId)
            return
          }
          throw new Error(registerResponse.msg || '注册失败')
        }
        
        const registerResult = registerResponse.data
        const token = registerResult.token
        
        if (!token) {
          throw new Error('注册成功但未获取到token')
        }
        
        // 保存token和openId到本地存储（不输出敏感信息）
        
        this.$store.commit('SET_TOKEN', token)
        uni.setStorageSync('openId', openId)
        
        // 验证保存结果（不输出敏感信息）
        
        uni.showToast({
          title: '注册并登录成功',
          icon: 'success'
        })
        
        // 跳转到首页
        setTimeout(() => {
          this.loginSuccess()
        }, 1500)
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
        background: var(--primary-color) !important;
        color: #fff !important;
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .text-primary {
        color: var(--primary-color) !important;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
      
      // 微信登录样式
      .wechat-login-section {
        margin-top: 40px;
        
        .wechat-login-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 45px;
          background-color: #07c160;
          border: none;
          border-radius: 20px;
          color: #fff;
          font-size: 16px;
          
          &:disabled {
            background-color: #ccc;
          }
          
          .wechat-text {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }

</style>
